<template>
    <van-tabs v-model="activeName" @click="tabClick" line-width="34%" color="#454592">
        <van-tab title="待反馈" name="a">
            <!--日程时间title-->
            <div class="field">
                <div class="field_title">
                    <div style="width: 100%;height: 48px;border-bottom: 1px solid #DDDDDD;">
                        <div class="search" @click="dateShow = true">
                            <img :src="search_icon" class="search_img"/>
                            <div class="search_text">搜索</div>

                            <img :src="calender_icon" class="calender_img"/>
                        </div>
                    </div>
                    <!--                    <div class="field_list" v-for="(item,index) in feedbackList"-->
                    <!--                         @click="nav2detail(item.callPlanId)">-->
                    <!--                        <div class="field_list_left">-->
                    <!--                            <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>-->
                    <!--                            <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>-->
                    <!--                            <div class="list_three">{{item.day}}</div>-->
                    <!--                        </div>-->
                    <!--                        <div class="field_list_right">-->
                    <!--                            <img :src="time_icon" class="list_four"/>-->
                    <!--                            &lt;!&ndash;<div class="list_five">{{item.day}}</div>&ndash;&gt;-->
                    <!--                            <van-count-down :time="Math.abs(item.timeDifference)" format="HH:mm "-->
                    <!--                                            style="text-align: center; color: #BCA46B;line-height: 30px;"/>-->
                    <!--                        </div>-->
                    <!--                        <div style="width: 100%;height: 1px;border-bottom: 1px solid #DDDDDD;float: left; margin-top: 15px;"></div>-->
                    <!--                    </div>-->
                    <!--                    <div class="field_list" v-for="(item,index) in feedbackList2"-->
                    <!--                         @click="nav2detail(item.callPlanId)">-->
                    <!--                        <div class="field_list_left">-->
                    <!--                            <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>-->
                    <!--                            <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>-->
                    <!--                            <div class="list_three">{{item.day}}</div>-->
                    <!--                        </div>-->
                    <!--                        <div class="field_list_right">-->
                    <!--                            <img :src="time_icon" class="list_four"/>-->
                    <!--                            &lt;!&ndash;<div class="list_five">{{item.day}}</div>&ndash;&gt;-->
                    <!--                            <van-count-down :time="Math.abs(item.timeDifference)" format="HH:mm "-->
                    <!--                                            style="text-align: center; color: #BCA46B;line-height: 30px;"/>-->
                    <!--                        </div>-->
                    <!--                        <div style="width: 100%;height: 1px;border-bottom: 1px solid #DDDDDD;float: left; margin-top: 15px;"></div>-->
                    <!--                    </div>-->
                    <van-collapse v-model="activeNames">
                        <van-collapse-item title="已保存" name="1">
                            <div class="field_list" v-for="(item,index) in feedbackList1"
                                 @click="nav2detail(item.callPlanId)">
                                <div class="field_list_left">
                                    <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>
                                    <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>
                                    <div class="list_three">{{item.day}}</div>
                                </div>
                                <div class="field_list_right">
                                    <img :src="time_icon" class="list_four"/>
                                    <!--<div class="list_five">{{item.day}}</div>-->
                                    <van-count-down :time="Math.abs(item.timeDifference)" format="HH:mm "
                                                    style="text-align: center; color: #BCA46B;line-height: 30px;"/>
                                </div>
                                <div style="width: 100%;height: 1px;border-bottom: 1px solid #DDDDDD;float: left; margin-top: 15px;"></div>
                            </div>
                        </van-collapse-item>
                        <van-collapse-item title="待反馈" name="2">
                            <div class="field_list" v-for="(item,index) in feedbackList"
                                 @click="nav2detail(item.callPlanId)">
                                <div class="field_list_left">
                                    <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>
                                    <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>
                                    <div class="list_three">{{item.day}}</div>
                                </div>
                                <div class="field_list_right">
                                    <img :src="time_icon" class="list_four"/>
                                    <!--<div class="list_five">{{item.day}}</div>-->
                                    <van-count-down :time="Math.abs(item.timeDifference)" format="HH:mm "
                                                    style="text-align: center; color: #BCA46B;line-height: 30px;"/>
                                </div>
                                <div style="width: 100%;height: 1px;border-bottom: 1px solid #DDDDDD;float: left; margin-top: 15px;"></div>
                            </div>
                        </van-collapse-item>
                    </van-collapse>
                </div>
            </div>
            <!--时间picker-->
            <Popup v-model="dateShow" position="bottom">
                <DatetimePicker type="date" v-model="currentDate" :formatter="formatter" @confirm="datetimeConfirm"
                                @cancel="dateShow=false" :min-date="minDate" :max-date="maxDate"/>
            </Popup>
            <Popup position="bottom" style="height: 100%" v-model="detailShow">
                <Detail @communicate="showForm($event)"/>
            </Popup>
        </van-tab>
        <van-tab title="已反馈" name="b">
            <!--日程时间title-->
            <div class="field">
                <div class="field_title">
                    <div style="width: 100%;height: 48px;border-bottom: 1px solid #DDDDDD;">
                        <div class="search" @click="dateShow = true">
                            <img :src="search_icon" class="search_img"/>
                            <div class="search_text">搜索</div>
                            <img :src="calender_icon" class="calender_img"/>
                        </div>
                    </div>

                    <div class="field_list" v-for="(item,index) in feedbackList"
                         @click="nav2detail(item.callPlanId)">
                        <div class="field_list_left">
                            <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>
                            <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>
                            <div class="list_three">{{item.day}}</div>
                        </div>
                        <!--<div class="field_list_right">-->
                        <!--<img :src="time_icon" class="list_four" />-->
                        <!--<div class="list_five">{{item.time}}</div>-->
                        <!--</div>-->
                        <div style="width: 100%;height: 1px;border-bottom: 1px solid #DDDDDD;float: left; margin-top: 15px;"></div>
                    </div>
                </div>

            </div>
            <!--时间picker-->
            <Popup v-model="dateShow" position="bottom">
                <DatetimePicker type="date" v-model="currentDate" :formatter="formatter" @confirm="datetimeConfirm"
                                @cancel="dateShow=false"/>
            </Popup>
            <Popup position="bottom" style="height: 100%" v-model="detailShow">
                <Detail @communicate="showForm($event)"/>
            </Popup>
        </van-tab>
        <van-tab title="已过期" name="c">
            <!--日程时间title-->
            <div class="field">
                <div class="field_title">
                    <div style="width: 100%;height: 48px;border-bottom: 1px solid #DDDDDD;">
                        <div class="search" @click="dateShow = true">
                            <img :src="search_icon" class="search_img"/>
                            <div class="search_text">搜索</div>
                            <img :src="calender_icon" class="calender_img"/>
                        </div>
                    </div>

                    <div class="field_list" v-for="(item,index) in feedbackList"
                         @click="nav2detail(item.callPlanId)">
                        <div class="field_list_left">
                            <div class="list_one">[{{item.callType}}] {{item.callSubType}}: {{item.title}}</div>
                            <div class="list_two">{{item.hospital}}/{{item.category}}/{{item.contact}}</div>
                            <div class="list_three">{{item.day}}</div>
                        </div>
                        <!--<div class="field_list_right">-->
                        <!--<img :src="time_icon" class="list_four" />-->
                        <!--<div class="list_five">{{item.time}}</div>-->
                        <!--</div>-->
                        <div class="list_five"></div>
                    </div>

                </div>

            </div>
            <!--时间picker-->
            <Popup v-model="dateShow" position="bottom">
                <DatetimePicker type="date" v-model="currentDate" :formatter="formatter" @confirm="datetimeConfirm"
                                @cancel="dateShow=false" :min-date="minDate" :max-date="maxDate"/>
            </Popup>
            <Popup position="bottom" style="height: 100%" v-model="detailShow">
                <Detail @communicate="showForm($event)"/>
            </Popup>
        </van-tab>
        <infinite-loading @infinite="loadmore" ref="infiniteLoading" :identifier="activeName">
                                   <span slot="no-more"><span
                                           style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span></span>
            <span slot="no-results"
                  style="font-family: PingFangSC-Regular;font-size: 12px;color: #999999;letter-spacing: 0.22px;text-align: justify;line-height: 16px;height: 30px;display: flex;justify-content: center;">没有更多记录</span>
        </infinite-loading>
    </van-tabs>

</template>

<script>

    import Vue from 'vue';

    import {
        Tab,
        Tabs,
        Cell,
        CellGroup,
        DatetimePicker,
        Popup,
        CountDown,
        Collapse,
        CollapseItem
    } from 'vant';
    // Vue.use(infiniteScroll)
    Vue.use(Tab);
    Vue.use(Tabs);
    Vue.use(CountDown);
    import search_icon from '@assets/image/search.svg'
    import calender_icon from '@assets/image/calender.svg'
    import time_icon from '@assets/image/time.svg'
    import {dateFormat} from '@util/date'
    import {
        queryScheduleList
    } from '@api/report'
    import InfiniteLoading from 'vue-infinite-loading';
    import Detail from './detail.vue'

    Vue.use(Collapse);
    Vue.use(CollapseItem);
    export default {
        name: "list",
        components: {
            InfiniteLoading,
            Tab,
            Tabs,
            Cell,
            CellGroup,
            DatetimePicker,
            Popup,
            Detail
        },
        data() {
            return {
                pageNo: 1,
                pageSize: 10,
                total: 0,
                activeName: 'a',
                activeNames: ['1', '2'],
                currentDateStr: '',
                //currentDate: null,
                dateShow: false,
                search_icon: search_icon,
                calender_icon: calender_icon,
                time_icon: time_icon,
                callReportTab: '',
                callReportStatus: '',
                callReportStatus1: '',
                callReportStatus2: '',
                loaddisable: false,
                detailShow: false,
                chooseDay: '',
                feedbackList: [],
                feedbackList1: [],
                feedbackList2: [],
                minDate: new Date(2000, 0, 1),
                maxDate: new Date(3000, 10, 1),
                currentDate: new Date(),
            };
        },
        methods: {
            tabClick(name, title) {
                this.pageNo = 1
                this.feedbackList = []
                this.feedbackList1 = []
                this.feedbackList2 = []
                this.getData()
            },
            nav2detail(callPlanId) {
                console.log("callPlanId", callPlanId)
                this.$router.push(`/feedback/detail?callPlanId=${callPlanId}`)

            },
            formatter(type, value) {
                if (type === 'year') {
                    return `${value}年`
                } else if (type === 'month') {
                    return `${value}月`
                } else if (type === 'day') {
                    return `${value}日`
                } else if (type === 'hour') {
                    return `${value}时`
                } else if (type === 'minute') {
                    return `${value}分`
                }
            },
            showDatetimePicker() {
                this.dateShow = true
            },
            datetimeConfirm(value) {
                this.dateShow = false
                ///this.currentDateStr = dateFormat('YYYY-mm-dd', new Date(value))
                this.chooseDay = dateFormat('YYYY-mm-dd', new Date(value))
                console.log("chooseDay", this.chooseDay)
                this.getData()
            },
            loadmore() {
                this.pageNo++
                this.loaddisable = true
                this.getData()
            },
            getData() {
                //组装请求参数
                if (this.activeName == 'a') {
                    this.callReportTab = '待反馈'
                } else if (this.activeName == 'b') {
                    this.callReportTab = '已反馈'
                } else if (this.activeName == 'c') {
                    this.callReportTab = '已过期'
                }

                let param = {
                    // startDate: '2020-05-13',
                    // endDate: '2020-05-13',
                    startDate: this.chooseDay,
                    endDate: this.chooseDay,
                    pageNo: this.pageNo,
                    limit: this.pageSize,
                    online: [],
                    onlineSub: [],
                    status: [],
                    callReportTab: this.callReportTab,
                    callReportStatus: this.callReportStatus
                }
                //请求列表数据
                queryScheduleList(param).then((res) => {
                        if (res.page.nextPageEnable < 1) {
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        } else {
                            this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        }
                        res.data.forEach(item => {
                            if (item.callReportStatus == '已保存') {
                                this.feedbackList1.push(item)
                            }
                            if (item.callReportStatus == '已提交') {
                                this.feedbackList2.push(item)
                            }
                            this.feedbackList.push(item)
                        })

                    }
                )
            },
            showDetail() {
                this.detailShow = true
            },
            showForm(key) {
                this.selectedId = key
                this.detailShow = false
            }
        },
        mounted() {
            this.chooseDay = dateFormat('YYYY-mm-dd', new Date())
            document.querySelector('body').setAttribute('style', 'background-color:#fff')
            this.getData()

        }

    }
</script>

<style scoped>
    .search {
        margin: 0 5.3%;
        height: 48px;
        position: relative;
        border-bottom: 1px solid #DDDDDD;
    }

    .search_img {
        float: left;
        margin-top: 13px;
    }

    .search_text {
        float: left;
        height: 48px;
        line-height: 40px;
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        margin-left: 10px;
    }

    .calender_img {
        float: right;
        margin-top: 13px;
    }

    .field_list {
        width: 100%;
        /*height: 100px;*/
        /*border-bottom: 1px solid #DDDD;*/
    }

    .field_list_left {
        float: left;
        margin-left: 5.3%;
        width: 65%;
    }

    .field_list_right {
        float: right;
        margin-right: 5.3%;
        width: 20%;
        margin-top: 25px;
    }

    .list_one {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        line-height: 22px;
        margin-top: 20px;
    }

    .list_two {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
        margin-top: 5px;
    }

    .list_three {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.22px;
        text-align: justify;
        line-height: 16px;
        margin-top: 5px;
    }

    .list_four {
        margin: 0 auto;
        display: block;
    }

    .list_five {
        width: 100%;
        height: 1px;
        border-bottom: 1px solid #DDDDDD;
        float: left;
        margin-top: 15px;
        text-align: center;
    }

    .van-collapse-item__content {
        padding: 0px !important;
    }

    .van-cell {
        background-color: rgb(245, 245, 248) !important;
    }
</style>